<template>
  <div>
    <el-select v-model="formInline.articleClassId" filterable clearable :size="size" @change="onChange">
      <el-option v-for="(item, index) in articleClassList" :key="index" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
import { GET_ARTICLECLASS_OPTIONS } from "@/http/system";
export default {
  name: "ArticleClass",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    size: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      articleClassList: this.$store.state.articleClassList,
      formInline: {},
    };
  },
  watch: {
    value: {
      handler: function (n, o) {
        if (!n) {
          this.formInline = {};
          return false;
        }
        this.$set(this.formInline, "articleClassId", n);
      },
      immediate: true,
    },
  },
  created() {
    // let n = this.$store.state.articleClassList;
    // if (!n || n.length <= 0) {
    //   this.getList();
    // }
    this.getList();
  },
  methods: {

    // 获取文章分类
    getList() {
      GET_ARTICLECLASS_OPTIONS().then((res) => {
        let list = res.data || [];
        this.articleClassList = list;
        this.$store.commit("SET_ARTICLECLASS_LIST", list);
      });
    },

    // 监听组件变化
    onChange(e) {
      console.log(e);
      this.$emit("input", e);
      this.$emit("change", e);
    },
  },
};
</script>
<style lang="scss" scoped>

</style>